<div id="addCoupon" class="layui-card">
        <div class="layui-header notselect">
            <div class="pull-left"><span>优惠劵</span></div>
            <div class="pull-right margin-right-15 nowrap">
                <button data-open="/shop/coupon/index"  class="layui-btn layui-btn-sm layui-btn-primary">返回</button>
            </div>
        </div>
        <div class="layui-card-body">
            <form id="addCouponForm" action="/shop/coupon/ajax_add" autocomplete="off" class="layui-form layui-form-pane form-search" onsubmit="return false;">
            <table class="layui-table">
                <tr>
                    <td colspan="6" align="center">优惠劵信息</td>
                </tr>
                <tr>
                    <td>优惠形式</td>
                    <td>
                        <input name="preferentialWay"value="1" v-model="couponData.preferentialWay" type="radio">现金卷
                        <input name="preferentialWay" value="2" v-model="couponData.preferentialWay" type="radio">折扣卷
                    </td>
                    <td>
                        <input v-if="couponData.preferentialWay=='2'" type="text" title="请输入折扣(0-1)" range="[0,10]" money="true" v-model="couponData.discount" class="layui-input required" placeholder="折扣">
                        <input v-if="couponData.preferentialWay=='1'" type="text" title="请输入金额(0.00)"  maxlength="5" money="true" v-model="couponData.quota" class="layui-input required" placeholder="请输入金额(0.00)">
                    </td>
                    <td colspan="4">
                        <input name="overlying" value="0" type="radio"  v-model="couponData.overlying">不可同时使用
                        <input name="overlying" value="1" type="radio"  v-model="couponData.overlying">可同时使用
                    </td>
                </tr>
                <tr>
                    <td>编码</td>
                    <td ><input name="code" v-model="couponData.code" required="required" title="请填写编码(长度不超过20)" maxlength="20" placeholder="编码" class="layui-input required"></td>
                    <td>满减限制</td>
                    <td>
                        <input name="restrictionMoney" v-model="couponData.restrictionMoney"  required="required" money="true" title="请输入金额(0.00)" maxlength="5" placeholder="满减限制" class="layui-input required">
                    </td>
                    <td>领取限制</td>
                    <td >
                        <input name="drawLimit" v-model="couponData.drawLimit"  required="required" title="请输入次数(必须为整数)" maxlength="2" digits="true" min="1" placeholder="领取限制" class="layui-input required">
                    </td>
                </tr>
                <tr>
                <tr>
                    <td colspan="1" align="center">优惠劵类型</td>
                    <td colspan="1" align="center">
                        <div class="layui-form-item layui-inline">
                            <div class="layui-input-inline">
                                <select name="type" lay-search v-modal="couponData.type">
                                    <option value="normal">普通类型</option>
                                    <option value="register">注册类型</option>
                                    <option value="campaign">活动类型</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td v-if="couponData.type=='campaign'">
                        <input name="channel" v-model="couponData.channel" required="required" title="请填写渠道值(长度不超过50)" maxlength="50" placeholder="活动通道值" class="layui-input required">
                    </td>
                    <td>优惠劵名称</td>
                    <td colspan="3"><input name="name" style="" v-model="couponData.name" required="required" title="请填写名称（长度不超过50）" maxlength="50" placeholder="请输入名称" class="layui-input required"></td>
                </tr>
                <tr>
                    <td>有效期类型</td>
                    <td colspan="1">
                        <div class="layui-form-item layui-inline">
                            <div class="layui-input-inline">
                                <select name="dateType" lay-search v-modal="couponData.dateType">
                                    <option value="interval">区间性</option>
                                    <option value="countdown">倒计时</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td v-if="couponData.dateType=='interval'" colspan="4">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input name="eifTime" type="text" class="layui-input" title="请填写生效时间"  required="required" v-model="couponData.eifTime" id="eifTime" placeholder="开始时间">
                            </div>
                        </div>
                        到
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input name="expireTime" type="text" class="layui-input" title="请填写结束时间"  required="required" v-model="couponData.expireTime" id="expireTime" placeholder="结束时间">
                            </div>
                        </div>
                    </td>
                    <td v-if="couponData.dateType=='countdown'" colspan="4">
                                <input name="countDownDay" type="text" style="width: 30%;" class="layui-input" title="请填写天数"  required="required" v-model="couponData.countDownDay" placeholder="请填写天数">
                    </td>
                </tr>
                <tr>
                    <td>优惠劵总数</td>
                    <td colspan="5">
                        <input name="total" v-model="couponData.total" style="width: 20%;"  required="required" title="请输入总数(必须为整数)" maxlength="100" digits="true" min="1" placeholder="优惠劵总数" class="layui-input required">
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="5">
                        <textarea name="remark" style="width: 30%;" v-model="couponData.remark" maxlength="100" placeholder="备注" class="layui-textarea"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <button class="layui-btn"  type="button"  v-on:click="saveData">保存配置</button>
                    </td>
                </tr>
            </table>
            </form>
        </div>
</div>
<script>
    require(['jquery', 'vue'], function (jquery,Vue) {
        var couponData= {"preferentialWay":"1","overlying":"0","restrictionMoney":'',"dateType":'interval',"type":'normal'}
        var vue=new Vue({
            el: '#addCoupon',
            data: {
                couponData: couponData
            },
            created: function () {
            },
            methods: {
                gernerateId: function (name, index) {
                    return name + "_" + index
                },
                saveData:function () {
                    if($("#addCouponForm").valid()) {
                        $.ajax({
                            type : "POST",
                            url : $("#addCouponForm").attr("action"),
                            data :couponData,
                            dataType : "json",
                            success : function(res) {
                                if(res.errorCode=="0") {
                                    $.msg.success(res.msg);
                                }
                                else {
                                    $.msg.error(res.msg);
                                }
                            }
                        });
                    }
                }
            }
        });
        function initDate() {
            laydate.render({
                elem: '#eifTime'
                ,type: 'datetime'
                ,done: function(value, date, endDate) {
                    vue.couponData.eifTime=value;
                }});
            laydate.render({
                elem: '#expireTime'
                ,type: 'datetime'
                ,done: function(value, date, endDate) {
                    vue.couponData.expireTime=value;
                }
            });
        }
        initDate();
        window.form.render();
        window.form.on('select', function(data){
            if(data.elem.name=="type") {
                vue.couponData.type=data.elem.value;
            }
            if(data.elem.name=="dateType") {
                vue.couponData.dateType=data.elem.value;
                initDate();
            }
        });
        form.on('radio', function (data) {
            if(data.elem.name=="preferentialWay") {
                vue.couponData.preferentialWay=data.elem.value;
            }
            else if(data.elem.name=="overlying")
            {
                vue.couponData.overlying=data.elem.value;
            }
        });
        $("#addCouponForm").validate();
    });
</script>